import { ButtonGroup, Typography } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { useCallback } from 'react';
import ButtonStyled from './ButtonStyled'
import { makeStyles } from 'tss-react/mui';

const useGroupBtnStyle = makeStyles()(() =>({
  Active: {
    background: '#007BC1 !important',
    border: '1px solid rgba(161, 167, 170, 0.36) !important',
    color: '#FFFFFF !important'
  }
}))

const GroupButton = (props) => {
  const { i18n: { language } } = useTranslation()
  const { buttonList, value, clickButton, ...others } = props
  const { classes } = useGroupBtnStyle()

  const clickItem = useCallback((item) => {
    clickButton(item)
  }, [clickButton])

  return (
    <ButtonGroup {...others}>
      {
        buttonList.map((item, index) => (
          <ButtonStyled
            key={index}
            onClick={() => clickItem(item)}
            className={`groupBtnItem ${value === item.value ? classes.Active : ''}`}
            disabled={item.disabled ? true : false}
          >
            <Typography component='span' noWrap className='width-full' sx={{ fontSize: '14px' }}>
              {item.label.i18nValue ? (item.label.i18nValue[language] ? item.label.i18nValue[language] : item.label.defaultValue) : item.label}
            </Typography>
          </ButtonStyled>
        ))
      }
    </ButtonGroup>
  )
}

export default GroupButton